<template>
	<view class="conten">
		<view class="title-box">
			<view class="search">
				<image src="http://rs.eonfox.cc/clzy/static/scan-ico.png" mode=" " @click="scanCode()" style="width:40upx; height:40upx; margin:0 10upx; "></image>
				<input type="text">
			</view>
		</view>
		<view class="body-box">
			<view class="data-left">
				<navigator redirect hover-class="other-navigator-hover" v-for="(item,item_index) in menu" :key="index" :url="'brand?index='+item_index" >
                    <button :class="{checked:(item_index==index)}" type="default" >{{item.title}}</button>
                </navigator>
			</view>
			<view class="data-right">
				<view class="banner">
					<image src="http://rs.eonfox.cc/clzy/static/raw_1521976632.png" style="width: 100%;height: 90px;" mode="aspectFit"></image>
				</view>
				<text style="font-weight: 600;font-size: 12px;margin: 7px;">推荐品牌</text>
				<view class="" style="height: 155px;">
					<view class="tuijian" v-for="i in 5"><image src="http://clzy.eonfox.com/8c8774f8ccc2873c65a51a15481295737445" style="width: 100%;height: 100%;" mode="aspectFit"></image></view>
					<view class="tuijian">
						<view class="more">
							<uni-icon type="forward" size="20" color="#eaebed"></uni-icon>
						</view>
					</view>
				</view>
				<view style="width: 95%;border-bottom: #eaebed 1px solid;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	// import Name from './components/Name.vue'
	import uniIcon from "@/components/uni-icon/uni-icon.vue";
	export default {
		components:{
			uniIcon
		},
		data() {
			return {
				index:0,
				menu: [
					{title:'为你推荐'},
					{title:'食品专区'},
					{title:'为你推荐'},
					{title:'食品专区'},
					{title:'为你推荐'},
					{title:'食品专区'},
					{title:'为你推荐'},
					{title:'食品专区'},
				]
			}
		},
		onLoad(e) {
			if(e.index){
				this.index=e.index
			}
		},
		
	}
</script>
<style>
	button[type=default] {
		background-color:transparent;
		border: none;
		font-size: 12px;
		padding: 0;
width:80px;
height:24px;
border-radius:17px;
margin:12px auto;
line-height:24px;
color: #000;
	}
	.search{
		width:90%;
height:30px;
margin:auto;
margin-top:10px;
	}
	.search image{
		float: left;
	}
	.search input{
		width:82%;float: left;
margin:auto;
height:20px;
background-color:#eaebed;
border-radius:10px;
padding-left:5%;

	}
	.banner{
		width:95%;
		height: 100px;
	}
.checked{
	background-color:#000 !important;
	color:#fff !important;
}
</style>
<style>
	*{
		margin: 0;padding: 0;display: block;
	}
	.conten{
		width: 100vw;height: 100%;background-color: #EAEBED;
	}
	.title-box{
		height: 8vh;width: 100%;margin-bottom: 1px;background-color: #fff;
	}
	.body-box{
		width: 100%;height: 91%;
	}
	.data-left{
		width: 27vw;
		float: left;
		line-height: 20px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Arial;
		background-color: #fff;
		border-right: solid 0.5vw #eaebed;
	}
	.data-right{
		width: 72.5vw;
		float: right;
		overflow: auto;
		background-color: #fff;
	}
	.tuijian{
		width: 30%;height: 70px;float: left;margin: 1.5%;
	}
	.more{
		width: 40px;height: 40px;border: solid 1px #eaebed;border-radius: 50%;margin: 15px auto;text-align: center;line-height: 40px;
	}
</style>
